<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS 测试</title>
</head>
<body>
    <h1>CORS 视频测试</h1>
    <video id="testVideo" controls width="640" height="360">
        <source src="http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
    
    <div id="log"></div>
    
    <script>
        const video = document.getElementById('testVideo');
        const log = document.getElementById('log');
        
        function addLog(message) {
            const p = document.createElement('p');
            p.textContent = new Date().toLocaleTimeString() + ': ' + message;
            log.appendChild(p);
            console.log(message);
        }
        
        video.addEventListener('loadstart', () => addLog('开始加载视频'));
        video.addEventListener('loadedmetadata', () => addLog('视频元数据加载完成'));
        video.addEventListener('canplay', () => addLog('视频可以播放'));
        video.addEventListener('error', (e) => {
            addLog('视频加载错误: ' + e.message);
            console.error('Video error:', e);
        });
        
        // 测试直接请求
        fetch('http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4', {
            method: 'HEAD',
            headers: {
                'Origin': 'http://localhost:5173'
            }
        })
        .then(response => {
            addLog('Fetch 请求成功: ' + response.status);
            addLog('CORS 头: ' + response.headers.get('Access-Control-Allow-Origin'));
        })
        .catch(error => {
            addLog('Fetch 请求失败: ' + error.message);
        });
    </script>
</body>
</html>